import React from 'react'
import 'bootstrap/dist/css/bootstrap.css'

export default class BindEvent extends React.Component {
    constructor(){
        super()
        this.state = {
            msg:'嘻嘻',
            name:"jack",
            age:18,
            gender:"男"
        }
    }
    render(){
        return <div>
            <button className="btn btn-success" onClick={()=> this.show('哈哈','嘿嘿')}>按钮</button>
            <h3>{this.state.msg}</h3>
            {/* 如果只是把文本框的value属性绑定到了 state 状态，如果不提供 onchange 处理函数的话 得到的文本框是一个只读的文本框 */}
            {/* 当为文本框绑定value值以后，要么提供一个readOnly，要么提供一个onchange处理函数 */}
            <input type="text" className="form-control" value={this.state.msg} onChange={(e)=>this.txtChanged(e)} ref="txt"/>
        </div>
    }
    txtChanged = (e)=>{
        console.log(e.target.value)
        let val = e.target.value;
        this.setState({
            msg:val
        })
        console.log(this.refs)
    }
    show = (arg1,arg2)=>{
        console.log('show方法被调用了',arg1,arg2)

        //在React中推荐使用 this.setState 修改数据
        //在setState只会把对应的状态更新，但是不会覆盖其他的state状态
        this.setState({
            msg:'😭😿'+arg1+arg2
        },()=>{
            console.log(this.state.msg);   
        })

        //注意：此处仍然输出原来状态的值 '嘻嘻'，因为this.setState方法是异步执行的
        console.log(this.state.msg);
    }
}




